<template>
  <div class="con">
    <header>
      <div class="box">
        <div class="left">
          <van-icon name="arrow-left" @click="back" />
        </div>
        <div class="center">
          <p>商品</p>
          <p>详情</p>
          <p>评价</p>
        </div>
        <div class="right">
          <div class="right1">
            <van-icon name="wap-home-o" @click="home" />
          </div>
          <div class="right2">
            <van-icon name="chart-trending-o" @click="share" />
            <van-action-sheet v-model="shows" title="分享到" style="height:370px">
              <share :config="config" class="share1"></share>
            </van-action-sheet>
          </div>
        </div>
      </div>
    </header>
    <main>
      <van-swipe @change="onChange" class="swiper">
        <van-swipe-item class="sw1">
          <img :src="shop.pimg" alt class="bg" />
        </van-swipe-item>
        <van-swipe-item class="sw2"></van-swipe-item>
        <van-swipe-item class="sw3"></van-swipe-item>
        <van-swipe-item class="sw4"></van-swipe-item>
        <van-swipe-item class="sw5"></van-swipe-item>
        <div class="custom-indicator" slot="indicator">{{ current + 1 }}/5</div>
        <div class="aa" slot="indicator">
          <div class="haoma">
            <p>货号 {{shop.pid}}</p>
          </div>
        </div>
      </van-swipe>

      <div class="main2">
        <div class="m-top">
          <p>{{shop.pname}}</p>
        </div>
        <div class="m-bottom">
          <div class="m1">
            <p>手机专享价</p>
            <span>￥{{shop.pprice}}</span>
          </div>
          <div class="m2">
            <p class="p1">自营</p>
            <p class="p2">积</p>
            <p class="p3">1.98(最高)</p>
            <van-icon name="warning-o" class="warn" @click="alertMenu" />
            <van-action-sheet v-model="show" title="最高积分定义">
              <div class="smallbox">
                <p>下单后可能获得的最高积分，实际请以提交订单后的积分为准。</p>
                <span @click="preserve">确定</span>
              </div>
            </van-action-sheet>
          </div>
        </div>
      </div>
      <div class="main4">
        <div class="m4-left">
          <p class="alike">促销&nbsp;:&nbsp;&nbsp;</p>
          <span class="reduce">立减</span>
          <p class="same">在线支付立减5元</p>
        </div>
      </div>
      <div class="main5">
        <van-action-sheet v-model="adresskeep" title="配送至">
          <div class="smallbox3">
            <van-area
              :area-list="areaList"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              title
              @confirm="keep"
            />
          </div>
        </van-action-sheet>

        <div class="m5-left" @click="adress">
          <p class="alike">送至&nbsp;:&nbsp;&nbsp;</p>
          <p class="same">{{city}}</p>
          <span style="color:#f2645a;font-size:18px">有货</span>
        </div>
        <van-icon name="arrow" @click="adress" />
      </div>
      <div class="main6">
        <van-action-sheet v-model="closew" title="物流信息">
          <div class="smallbox2">
            <p>商品从供应商仓库发货，并由指定配送公司配送，如遇供应商仓库关仓，配送时间将会延后1-2天。</p>
            <div class="git">
              <figure>
                <van-icon name="shop-o" class="storehouse1" />
                <figcaption>
                  <b style="color:#cd5f52">供应商仓库</b>
                </figcaption>
              </figure>
              <b>----</b>
              <figure>
                <van-icon name="logistics" class="storehouse" />
                <figcaption>
                  <b>指定配送公司配送</b>
                </figcaption>
              </figure>
              <b>----</b>
              <figure>
                <van-icon name="location-o" class="storehouse" />
                <figcaption>
                  <b>目的地</b>
                </figcaption>
              </figure>
            </div>
            <span @click="closewid">关闭</span>
          </div>
        </van-action-sheet>
        <div class="m5-left" @click="tan">
          <p class="alike">物流&nbsp;:&nbsp;&nbsp;</p>
          <p class="same">预计11月03日&nbsp;24:00前送达</p>
        </div>
        <van-icon name="arrow" @click="tan" />
      </div>
      <div class="main7">
        <div class="m1">
          <p>
            <van-icon name="passed" class="dui" />&nbsp;正品保障
          </p>
          <p>
            <van-icon name="passed" class="dui" />&nbsp;京东客服
          </p>
        </div>
        <div class="m2">
          <p>
            <van-icon name="passed" class="dui" />&nbsp;商品售出，无质量问题，不接受7天无理由退换货
          </p>
        </div>
        <div class="m3">
          <p>
            <van-icon name="passed" class="dui" />&nbsp;指定配送公司配送
          </p>
          <p>
            <van-icon name="passed" class="dui" />&nbsp;退换货细则
          </p>
          <van-icon name="warning-o" class="warn" @click="alertMenu1" style="font-size:20px" />
          <van-action-sheet v-model="show1" title="食品、保健品类商品退换货细则">
            <div class="smallbox1">
              <p style="margin-top:12px">1)商品一经售出,若无质量问题，不接受7天无理由退换货。</p>
              <p>2)商品质量问题,字实际收到商品之日起7天内可退换货，15天可换货。</p>
              <p>3)注意事项</p>
              <p>根据国家相关法律规定，食品、保健食品类商品属于特殊商品，一经售出非质量问题概不退换货。</p>
              <p>说的是每次下班项目不错嘛项目下存在马晓旭表现出才能。</p>
              <p>4)凡是涉及需要顾客将还是那个品、购物凭证、包装等返回我公司办理退换货的，另需附上订购编号、接收人、联系方式。</p>
              <span @click="preserve1">确认</span>
            </div>
          </van-action-sheet>
        </div>
      </div>
      <div class="main8">
        <p>同品推荐</p>
      </div>
      <div class="main9">
        <figure v-for="(item1,i) in shop1" :key="i+1" @click="detail(item1.pid)">
          <img :src="item1.pimg" alt />
          <figcaption>
            <p>{{item1.pname}}</p>
            <span>￥{{item1.pprice}}</span>
          </figcaption>
        </figure>
      </div>
    </main>

    <footer>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" :info="num" @click="cart()"/>
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button type="warning" text="加入购物车" @click="addcart" />

        <van-action-sheet v-model="show2" title>
          <div class="smallbox4">
            <figure>
              <img :src="shop.pimg" alt />
              <figcaption>
                <p>￥{{shop.pprice}}</p>
                <b>已选择:</b>
              </figcaption>
            </figure>
            <div class="bottom">
              <p>数量</p>
              <div class="b">
                <button @click="jian">-</button>
                <input type="text" :value="ipt" />
                <button @click="sum">+</button>
              </div>
            </div>
            <span @click="preserve2">确认</span>
          </div>
        </van-action-sheet>

        <van-goods-action-button type="danger" text="立即购买" @click="buy" />

        <van-action-sheet v-model="show3" title>
          <div class="smallbox4">
            <figure>
              <img :src="shop.pimg" alt />
              <figcaption>
                <p>￥{{shop.pprice}}</p>
                <b>已选择:</b>
              </figcaption>
            </figure>
            <div class="bottom">
              <p>数量</p>
              <div class="b">
                <button @click="jian">-</button>
                <input type="text" :value="ipt" />
                <button @click="sum">+</button>
              </div>
            </div>
            <span @click="preserve3(shop.pid)">确认</span>
          </div>
        </van-action-sheet>
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import * as api from "../../api/getproductlist";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import axios from "axios";
export default {
  name: "Detailpro1",
  data() {
    return {
      activeName: "a",
      current: 0,
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      shows: false,
      showcart: false,
      adresskeep: false,
      closew: false,
      goodsId: "",
      num: "0",
      quota: 0,
      quotaUsed: 0,
      messageConfig: "",
      title: "请选择 数量",
      shop: [],
      city: "深圳市宝安区",
      ipt: 1,
      shop1: [],
      shop2: [],
      cartList: [],
      config: {
        url: "http://www.baidu.com", // 网址，默认使用 window.location.href
        source: "", // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
        title: "hello", // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
        description: "hi", // 描述, 默认读取head标签<meta name="description" content="PHP弱类型的实现原理分析" />
        image: "", // 图片, 默认取网页中第一个img标签
        sites: ["qzone", "qq", "weibo", "wechat", "douban"], // 启用的站点
        disabled: [], // 禁用的站点
        wechatQrcodeTitle: "微信扫一扫：分享", // 微信二维码提示文字
        wechatQrcodeHelper:
          "<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>"
      },
      count: 0
    };
  },
  computed: {
    ...mapState(["areaList", "usernames"])
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    home() {
      this.$router.push("/index");
    },
    cart(){
      this.$router.push('/cart')
    },
    onChange(index) {
      this.current = index;
    },
    alertMenu() {
      this.show = true;
    },
    alertMenu1() {
      this.show1 = true;
    },
    preserve() {
      this.show = false;
    },
    preserve1() {
      this.show1 = false;
    },
    pnum() {
      this.show5 = true;
    },
    adress() {
      this.adresskeep = true;
    },
    keep(ad) {
      this.adresskeep = false;
      this.city = ad[0].name + ad[1].name + ad[2].name;
    },
    tan() {
      this.closew = true;
    },
    closewid() {
      this.closew = false;
    },

    //加入购物车
    addcart() {
       let token=this.$store.state.tokens
         let uid=this.$store.state.uids
      if (this.cartList.some(v => v.pid == this.$route.params.id) === false) {
        this.show2 = true;
      } else {
        this.show2 = false;
        let pid = this.$route.params.id;
        let obj = this.cartList.find(v => v.pid == pid);
        obj.pnum++;
        api
          .updatecartpnum({
            uid: uid,
            pid: this.$route.params.id,
            pnum: obj.pnum
          })
          .then(data => {
            if (data.data.code == 200) {
              this.$toast.success("添加成功");
            }
          });
      }
    },
    preserve2() {
       let token=this.$store.state.tokens
         let uid=this.$store.state.uids
      api
        .addcart(
          { uid: uid, pnum: this.ipt, pid: this.$route.params.id },
          { headers: { token: token } }
        )
        .then(data => {
          this.show2 = false;
          this.$toast.success("添加成功");
          axios
            .get("http://121.199.68.97:8800/getcart", {
              params: {
                uid: uid
              },
              headers: {
                token: token
              }
            })
            .then(data => {
              this.num = data.data.data.length;
              this.cartList = data.data.data;
            });
        });
    },
    buy() {
      this.show3 = true;
    },
    preserve3(id) {
      let chosenArr=[]
      chosenArr.push(id)
      this.$router.push({
        path:'/order',
        query:{
          id:chosenArr,
          pnum:this.ipt
        }
      })

    },
    detail(id) {
      this.$router.push("/detailpro/" + id);
    },
    share() {
      this.show4 = true;
    },
    sum() {
      this.ipt++;
    },
    jian() {
      if (this.ipt <= 1) {
        return;
      }
      this.ipt--;
    },
    share() {
      this.shows = true;
    },
    onBuyClicked() {},
    onAddCartClicked() {}
  },
  mounted() {

    api.getproinfo({ pid: this.$route.params.id }).then(data => {
      this.shop = data.data.data;
    });
    api.getproductlist({}).then(data1 => {
      this.shop1 = data1.data.data;
    });
    let token=this.$store.state.tokens
         let uid=this.$store.state.uids
    axios
      .get("http://121.199.68.97:8800/getcart", {
        params: {
          uid: uid
        },
        headers: {
          token: token
        }
      })
      .then(data => {
        this.num = data.data.data.length;
        this.cartList = data.data.data;
      });
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.bg {
  width: 100%;
  height: 100%;
}
.con {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header .box {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
}
header {
  height: 46px;
  background: white;
  /* opacity: 0.5; */
}
header .center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 120px;
  height: 46px;
  font-size: 14px;
}
header .right {
  width: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left,
.right1,
.right2 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}
main {
  flex: 1;
  overflow: auto;
}
.swiper {
  /* margin-top: -46px; */
  height: 300px;
  position: relative;
}
.sw1 {
  background: lawngreen;
}
.sw2 {
  background: tomato;
}
.sw3 {
  background: yellowgreen;
}
.sw4 {
  background: violet;
}
.sw5 {
  background: saddlebrown;
}
.custom-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 50px;
  height: 20px;
  border-radius: 15px;
  background: #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.haoma p {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 0 5px;
  height: 20px;
  border-radius: 15px;
  background: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.main2 {
  border-bottom: 1px solid #f3f3f3;
  height: 60px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.main2 .m-top p {
  font-size: 20px;
  font-weight: 600;
  color: #414141;
}
.main2 .m-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.main2 .m-bottom .m1 {
  display: flex;
  width: 130px;
  justify-content: space-between;
  align-items: center;
}
.main2 .m-bottom .m1 p {
  font-size: 14px;
  color: #eb4249;
}
.main2 .m-bottom .m1 span {
  font-size: 18px;
  color: #d71c25;
}

.main2 .m-bottom .m2 {
  width: 300px;
  display: flex;
  width: 150px;
  justify-content: space-between;
  align-items: center;
}
.main2 .m-bottom .m2 p {
  font-size: 14px;
}
.main2 .p1 {
  width: 40px;
  height: 20px;
  color: white;
  background: #f2645a;
  display: flex;
  border-radius: 3px;
  justify-content: center;
}
.main2 .p2 {
  width: 20px;
  height: 20px;
  color: white;
  background: #f2645a;
  display: flex;
  border-radius: 3px;
  justify-content: center;
}
.warn {
  font-size: 14px;
}
#con {
  height: 300px;
  font-size: 12px;
  padding: 13px;
  font-size: 18px;
  border-top: 1px solid #f3f3f3;
}

.main3,
.main4,
.main5,
.main6 {
  display: flex;
  height: 60px;
  border-bottom: 1px solid #f3f3f3;
  align-items: center;
  padding: 0 15px;
  justify-content: space-between;
}
.m3-left,
.m4-left,
.m5-left,
.m6-left {
  display: flex;
  align-items: center;
}
.alike {
  color: #909090;
  font-size: 16px;
}
.same {
  color: #424242;
  font-size: 16px;
}
.reduce {
  width: 40px;
  border: 2px solid #f2645a;
  border-radius: 2px;
  font-size: 16px;
  color: #ee655b;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin-right: 5px;
}

.main7 {
  height: 120px;
  border-top: 6px solid #f3f3f3;
  border-bottom: 6px solid #f3f3f3;
}
.main7 .m1,
.main7 .m2,
.main7 .m3 {
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 14px;
  padding: 0 10px;
  color: #414141;
}
.main7 p {
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.dui {
  color: #d71c25;
  font-size: 18px;
}
.van-icon-arrow {
  font-size: 18px;
}
.main8 p {
  height: 50px;
  border-bottom: 1px solid #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #414141;
  font-weight: 600;
}
.main9 {
  display: flex;
  overflow: auto;
  padding: 0 10px;
}
.main9 figure {
  height: 150px;
  margin-right: 10px;
  width: 100px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main9 figure img {
  display: block;
  width: 80px;
  height: 80px;
  background: #d71c25;
}
.main9 figcaption {
  width: 80px;
}
.main9 figcaption p {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  margin-top: 10px;
  color: #414141;
  font-weight: 500;
}
.main9 figcaption span {
  font-size: 18px;
  color: #d71c25;
  font-weight: 600;
}
.storehouse {
  font-size: 34px;
}
.storehouse1 {
  font-size: 34px;
  color: #ea543b;
}
.git {
  display: flex;
  margin-top: 30px;
}
.git figure {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.git figcaption {
  margin-top: 10px;
}
.smallbox4 {
  height: 320px;
  font-size: 18px;
  position: relative;
}
.smallbox4 span {
  position: absolute;
  bottom: 0;
  display: block;
  height: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  background: #f83112;
  color: white;
}

.smallbox4 figure {
  padding: 15px;
  display: flex;
  align-items: center;
}
.smallbox4 figure img {
  display: block;
  width: 100px;
  height: 100px;
  background: #ea543b;
}
.smallbox4 figcaption {
  margin-left: 10px;
  font-size: 16px;
}
.smallbox4 figcaption p {
  color: #d71c27;
  font-weight: 600;
}
.smallbox4 figcaption span {
  font-size: 14px;
  color: #7f7f7f;
}
.smallbox4 .bottom {
  padding-left: 15px;
}
.smallbox4 p {
  font-size: 16px;
  color: #696969;
  margin-bottom: 10px;
}
.smallbox4 button {
  border: 0;
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid #b5b5b5;
  box-sizing: border-box;
}
smallbox4 .b {
  display: flex;
}
.smallbox4 input {
  width: 40px;
  height: 30px;
  border: 0;
  border-top: 1px solid #b5b5b5;
  border-bottom: 1px solid #b5b5b5;
  text-align: center;
  line-height: 30px;
  box-sizing: border-box;
}
.share1 {
  /* height:300px; */
  display: flex;
  margin-top: 200px;
  justify-content: center;
  font-size: 30px;
}
.social-share .social-share-icon {
  width: 50px;
  height: 50px;
  border: 1px solid red;
  font-size: 20px;
  margin-left: 20px;
}

footer {
  height: 50px;
}

/* 标题 */
.van-action-sheet__header {
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  color: #414141;
  font-weight: 600;
}
/* 点击关闭按钮 */
.van-action-sheet__close {
  display: none;
}
.smallbox {
  height: 300px;
  font-size: 18px;
  border-top: 1px solid #f3f3f3;
  position: relative;
}
.smallbox p {
  padding: 0 10px;
  color: #6b6b6b;
  font-size: 16px;
}
.smallbox span {
  position: absolute;
  bottom: 0;
  display: block;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f83112;
  color: white;
  width: 100%;
}
.smallbox1 {
  height: 335px;
  font-size: 18px;
  border-top: 1px solid #f3f3f3;
  position: relative;
}

.smallbox1 p {
  padding-left: 8px;
  color: #6b6b6b;
  font-size: 16px;
}
.smallbox1 span {
  position: absolute;
  bottom: 0;
  display: block;
  height: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  background: #f83112;
  color: white;
}

.smallbox2 {
  height: 300px;
  font-size: 18px;
  border-top: 1px solid #f3f3f3;
  position: relative;
}

.smallbox2 p {
  padding: 0 10px;
  color: #6b6b6b;
  font-size: 16px;
}
.smallbox2 span {
  position: absolute;
  bottom: 0;
  display: block;
  height: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  background: #f83112;
  color: white;
}

.git {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;
}
.git figure {
  margin-left: 5px;
  margin-right: 0px;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
}
.git figcaption {
  margin-top: 10px;
}
.storehouse {
  font-size: 30px;
  color: #cccccc;
}
.storehouse1 {
  color: #ea543c;
  font-size: 30px;
}
.smallbox2 b {
  color: #b5b5b5;
}
.smallbox3 {
  height: 320px;
  font-size: 18px;
  border-top: 1px solid #f3f3f3;
  position: relative;
}

.smallbox3 p {
  padding: 0 10px;
  color: #6b6b6b;
  font-size: 16px;
}
.smallbox3 span {
  position: absolute;
  bottom: 0;
  display: block;
  height: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  background: #f83112;
  color: white;
}
</style>